<template>
    <div>

      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
      </el-breadcrumb>



      <el-card class="box-card">


          <el-form :model="searchForm" label-width="70px">
            <el-row>
              <el-col :span="8">
              <el-form-item label="名称">
                <el-input v-model="searchForm.name" style="width: 200px"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label="化学元素叫法" label-width="100px">
                <el-input v-model="searchForm.chemical" style="width: 200px"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" @click="searchList">搜索</el-button>
                <el-button type="primary" @click="addMaterial">添加</el-button>
                <el-button type="primary" @click="dialogVisible = true">导入</el-button>
                <el-button type="primary" @click="inputExcel">导出</el-button>
              </el-col>
            </el-row>
          </el-form>



        <el-table
          :data="materialList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="code"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="chemical"
            label="化学元素叫法">
          </el-table-column>
          <el-table-column
            prop="density"
            label="密度">
          </el-table-column>
          <el-table-column
            prop="hardness"
            label="硬度">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="材料介绍">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-button type="primary" @click="updateById(scope.row.id)">编辑</el-button>
                  <el-button type="primary" @click="detail(scope.row.id)">明细</el-button>
                  <el-button type="primary" @click="deleteById(scope.row.id)">删除</el-button>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>


        <el-dialog title="导入原材料" :visible.sync="dialogVisible" width="30%">

          <el-upload
            class="upload-demo"
            drag
            action="/api/material/importExcel"
            :headers="auth"
            :on-success="uploadExcelSuccess"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">导入原材料数据</div>
          </el-upload>

        </el-dialog>

      </el-card>

    </div>
</template>

<script>
  export default {
    name: 'Material',
    data(){
      return{
        materialList:[],
        page:{
          currentPage:0,
          pageSize:5,
          total:0
        },
        searchForm:{},
        dialogVisible:false,
        auth:{token:null}
      }
    },
    methods:{
      //导出
      inputExcel:function(){

        debugger;
        location.href="http://localhost:8080/material/excelInput";
      },
      //导入
      uploadExcelSuccess:function(res, file){
       debugger;
       if(res){
         this. dialogVisible=false;
         this.searchList();
       }

      },
      searchList:function () {
        this.$http.post("/material/list/"+this.page.currentPage+"/"+this.page.pageSize,this.searchForm).then((res)=>{
          this.materialList=res.data.result.list;
          this.page.total=res.data.result.total;
        });
      },
      handleSizeChange: function (val) {
        this.page.pageSize = val;
        this.searchUser();
      },
      handleCurrentChange: function (val) {
        this.page.currentPage = val;
        this.searchUser();
      },
      //跳转到添加页面
      addMaterial:function () {
        this.$router.push({ path: "/addMaterial" });
      },
      //跳转到修改页面
      updateById:function (id) {
        this.$router.push({ path: "/updateById?id="+id });
      },
      //跳转到明细页面
      detail:function (id) {
        this.$router.push({ path: "/detail?id="+id });
      },
      //删除
      deleteById:function (id) {
        alert(id);
        this.$http.get("/material/deleteById/"+id).then((res)=>{
          if(res.data.success){
            alert(res.data.message);
          }else{
            alert(res.data.message);
          }
          this.searchList();
        });
      }
    },
    mounted () {
      this.auth.token = sessionStorage.getItem("token");
      this.searchList();
    }
  }
</script>

<style scoped>

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

</style>
